<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			.coupon-part{
				min-height: 460px;
			}

			.coupon-part .horizon{
				height: 1px;
				background: #efefef;
			}
			.coupon-part .topoffset{
				margin-top: 15px;
			}
			.coupon-part .coupon .image{
				width: 610px;
				height: 170px;
				border-radius: 5px;
				overflow: hidden;
				margin-right: 20px;
				cursor: pointer;
			}
			
			.coupon-part .coupon{
				margin-top: 10px;
			}
			
			.coupon-area {
				width: 920px;
				margin-left: auto;
				margin-right: auto;
			}
			
			.buyword{
				position:absolute; 
				top:95px;
				left: 226px;
				color: #ffffff;
				font-size: 15px;
				font-weight: bold;
			}
			
			.buyNum{
				position: absolute; 
				top:46px;
				left: 243px;
				color: #ffffff;
				font-size: 33px;
				font-weight: bold;
				font-style:oblique;
				background: linear-gradient(to right, white, yellow);
        		-webkit-background-clip: text;
        		color: transparent;
        		width: 300px;
			}
			
			.states{
				position: absolute; 
				left: 450px;
				top:60px;
				padding: 7px;
				padding-left: 33px;
				padding-right: 33px;
				background: #ebbf1f;
				border-radius: 15px;
				color: #FFFFFF;
				font-size: 17px;
				font-weight:bold;
			}
			
			.coupon-part .logo-part{
				text-align: center;
			}
			
			.nums{
				color: #ff0000;
				font-size: 21px;
			}
			
			.noneword{
				font-size: 16px;
				color: #999999;
				text-align: center;
				margin-top: 5px;
			}
		</style>
	</head>
	<body>
		
		<div class="coupon-part" id="coupon-list">

				<div class="coupon-area" >
					<div class="coupon" v-for="item in couponlist"  style="width: 920px;">
						<div class="topoffset items-display-flex flex-row flex-between">
							<div class="items-display-flex flex-row" style="flex-direction: row;align-items:flex-start;">
								<div class="image">
									<div style="position: relative;top:0px;">								
										<img src="../img/couponbg.png" style="width: 610px;height: 164px;"/>
										<span class="buyNum">押{{item.name}}</span>
										<span class="buyword">( 可叠加购买 )</span>										
										<span class="states">{{item.statename}}</span>
									</div>
								</div>
							</div>
							
							<div class="logo-part" >
								<span class="nums">x1</span>
							</div>
							
						</div>
						<div class="horizon"></div>
						
					</div>
					<div class="noneword"><span>没有更多优惠券了</span></div>
				</div>
		</div>
	</body>
	
	<script>

		var curUserid = 11;
		var maincnt = new Vue({
			el:'#coupon-list',
			data:{
				menuindex:0,
				couponlist:{},
				isloadtops:false
			},
			methods:{
				changeMenu:function(index){
					this.menuindex = index;
					if(this.menuindex == 1){
						console.log('this 1='+this.menuindex);
						$('#follow').load('../user/user_follow.html');
					}
				},
				exitfollow:function (objs){
					showtips(objs,{tipsmsg:'是否真的要取消此关注',tipstype:1});
				}
			}
		});
		
		function loadCoupon() {			
			var urlstr = publicUrl + '/v1/coupon/my-list';
			jQuery.get(urlstr, {
				uid: curUserid
			}, function(res) {
				var arr = res.data.list;	
				for(var i = 0;i<arr.length;i++){
					if(arr[i].used == 0){
						arr[i].statename = '已购买';
					}
					else if(arr[i].used == 1){
						arr[i].statename = '已使用';
					}
				}
				maincnt.couponlist = arr;
			});
		}
		
		setTimeout(function(){
			var cuinfo = getUserInfo();
			if(cuinfo){
				curUserid = cuinfo.uid;
				loadCoupon();
			}
		},100);
		
	</script>
</html>
